<template>
<div>
  <div>
      <div class="user-item" v-for="group, index in groupList">
        <mu-paper :zDepth="2" class='user-list-paper'>
          <mu-row gutter>
            <mu-col desktop="30">
              <img :src="group.group_thumbnail" alt="">
              <!-- <mu-avatar :size="90" :src="group.group_thumbnail"/> -->
            </mu-col>
            <mu-col desktop="40">
              <div class="group-name">{{group.group_name}}</div>
            </mu-col>
            <mu-col desktop="30">
              <div class="user user-name">
                <mu-raised-button label="停用" @click="banGroup(group.group_id,group.group_status,index)" :disabled="group.group_status == 2" class="gs-btn" secondary/>
                <mu-raised-button label="启动" @click="banGroup(group.group_id,group.group_status,index)" :disabled="group.group_status == 1" class="gs-btn" backgroundColor="#4BAF4F"/>
              </div>
            </mu-col>
          </mu-row>
        </mu-paper>
      </div>

      <div class="user-item" @click="open">
        <mu-paper :zDepth="2" class='add-paper'>
          <mu-row gutter>
            <mu-col desktop="30">
              
            </mu-col>
            <mu-col desktop="70">
              加<mu-avatar :size="90" src="/static/images/car.jpg"/>
            </mu-col>
          </mu-row>
        </mu-paper>
      </div>
      
  </div>

  <mu-dialog :open="dialog" title="添加分组" @close="close">
    <div>
      <mu-paper>
        <div class="head-box">
          <simple-image-upload :imgsize="120" :resultPicture.sync="group_thumbnail"></simple-image-upload>
          <span>分组图标</span>
        </div>        
        <mu-divider/>
        <mu-text-field hintText="组名" class="divider-form" :underlineShow="false" v-model="group_name" />
        <mu-divider/>
        <div class="switch-box">
          <mu-switch label="状态" labelLeft v-model="group_status"/>
        </div>
        <mu-divider/>
        <mu-raised-button label="添加" :disabled="isNAdd" class="button" @click="addGroup" />
      </mu-paper>
    </div>
  </mu-dialog>
</div>
</template>
<script>
  import SimpleImageUpload from '../../components/imageUpload/simple-image-upload.vue'
  import http from "../../http/http.js" 
  export default {
    data () {
      return {
        getGroupUrl:this.config.getGroupUrl,
        groupList:{},
        dialog: false,//控制弹窗

        addUrl:this.config.addGroupUrl,
        isAddNum:0,
        isNAdd:true,
        group_thumbnail:'',//分组图标
        group_name:'',//组名
        group_status:true,//组的状态，1正常，2未开放

        changeGroupStatusUrl:this.config.changeGroupStatusUrl,//改变分组状态地址
      }
    },
    components : {
      SimpleImageUpload
    },
    methods: {
      //改变分组的状态
      banGroup:function(id,status,index){
        console.log(id+':'+status)
        var that = this
        var group_status = 1
        if(status == 1)
          group_status = 2
        var group_update_data = {
          group_id : id,
          group_status : group_status
        }
        http.post(that.changeGroupStatusUrl,{
          group_update_data:group_update_data
        })
        .then(function(response){
          if(response.data.code == 200){
            that.groupList[index].group_status = group_status
          }
        })
        .catch(function(err){console.log(err)});
      },
      // 添加分组
      addGroup:function(){
        var that = this
        var group_status = 1
        if(!this.group_status)
          group_status = 2
        var group_data = {
          group_thumbnail:this.config.adminUrl+'/uploads/images/head/mini/'+this.group_thumbnail,
          group_name:this.group_name,
          group_status:group_status,
        }
        http.post(that.addUrl,{
          group_data:group_data
        })
        .then(function(response){
          // that.showToast();
          console.log(response)
        })
        .catch(function(err){console.log(err)});
      },
      //弹窗
      open () {
        this.dialog = true
      },
      //关闭弹窗
      close () {
        this.dialog = false
      },
    },
    mounted() {
      var that = this
      http.get(that.getGroupUrl)
      .then(function(response){
        if(response.data.code == 200)
          that.groupList = response.data.groups;
        else
          console.log(response.data.msg)
      })
      .catch(function(err){console.log(err)});
    },
    watch:{
      group_thumbnail(val,oldVal){
        if(val != ''){
          // if(this.isAddNum >= 2)
            this.isNAdd = false
          // else
          //   this.isAddNum++
        }
      },
    }
  }
</script>

<style lang="css" scode>
/*.mu-dialog{
  width: 90%;
  height:95%;
  max-width: 100%;
  max-height:100%;
}*/
.add-paper:hover {
  background: #F0F0F0;
  cursor: pointer;
}
.user-item{
  float: left;
  /*cursor: pointer;*/
  width: 333px;
}
.user-list-paper{
  padding:8px;
}

.picture-type-box{
  width:100px;
  height:56px;
  margin-top:20px;
}
.group-name{
  padding-top:25px;
  font-size: 24px;
  color: #9CA3CD;
  min-height: 25px;
}

/*添加组的弹窗*/
.mu-dialog-title{
  display: block;
  text-align: center;
}
.divider-form {
  width: 100%;
  margin-bottom: 0;
  padding-left: 20px;
}
.divider-form input{
  width: 100%;
}
.head-box{
  margin: 0 auto;
  display: flex;
}
.head-box span{
  margin:35px 30px; 
  font-size: 30px;
  color:#E1E1E1;
}
.switch-box{
  padding:15px 20px;
}
.button{
  width: 100%;
  background: #03a9f4;
}
.gs-btn{
  margin: 5px 0 0 -30px; 
  font-size: 18px;
  border-radius: 5px;
}
</style>